<template>
  <div class="body" v-infinite-scroll="loadFun">
    <div style="font-size: 14px;margin: 0 320px;">
      <div class="share-tab">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <all ref="first"></all>
          </el-tab-pane>
          <el-tab-pane label="官塘校区" name="second">
            <all ref="second"></all>
          </el-tab-pane>
          <el-tab-pane label="社湾校区" name="third">
            <all ref="third"></all>
          </el-tab-pane>
          <el-tab-pane label="我的分享" name="fourth">
            <all ref="fourth"></all>
          </el-tab-pane>
        </el-tabs>
      </div>


    </div>
  </div>
</template>

<script>
  import all from "./all.vue";
  export default {
    components: {
      all,
    },
    data() {
      return {
        activeName: 'first',
        school: null
      };
    },
    mounted() {
      this.$refs[this.activeName].init(this.school);
    },
    methods: {
      handleClick(tab, event) {
        if(tab.index !== '0'){
          this.school = tab.index;
        }else{
          this.school = null;
        }
        this.$refs[tab.name].init(this.school);
        console.log(tab, event);
      },
      loadFun() {
        this.$refs[this.activeName].load();
      },
    }
  };
</script>

<style>
  .body{
    margin: 0;
    padding: 20px 0 0 0;
    width: 100%;
    height: calc(100% - 80px);
    /*background-size: 100% 100%;*/
    /*background-image:  url("../../../public/img/background-detail.jpg");*/
    /*background-repeat: no-repeat;*/
    /*overflow: hidden;*/
    background-image: url("../../../public/img/background-detail.jpg");
    background-size: cover;
    background-attachment: fixed;
    overflow: scroll;
  }
  /*.share-tab{*/
  /*  overflow: scroll;*/
  /*}*/
  /*.share-tab .el-tabs__content{*/
  /*  overflow: scroll!important;*/
  /*}*/
  .share-tab .el-tabs__header{
    background-color: #ffffff!important;
    padding: 0px 20px!important;
  }
  .share-tab .el-tabs__nav{
    height: 60px!important;
    line-height: 60px!important;
  }
</style>
